<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>websocket 聊天室</title>		
		<style>
		body{
			background-image: url(images/maitian.jpg);
			background-repeat: no-repeat;
			background-size: 100%;
			font-size:12px;
		}
		ul {list-style: none; font-size:12px;}
		li{ background:darkseagreen; line-height:30px;padding:0 10px;}
		a{ text-decoration: none;}
		.container{width:1000px;margin: 0 auto;}	
		header{ height:100px; background:#F5F5F5;color:#fff;}
		.logo{ font-size:25px;float: left;margin:30px 10px;color:#23527C}
		.userinfo{ float: right;margin:30px 40px;}
		.btn{ 
			background: #ccc;
			color:#000;
			width:80px;
			height:30px;
			line-height: 30px;
			display: inline-block;
			border:1px solid #1B6D85;
			text-align: center;
			}
		.loginname{ background: orange; color:#fff;padding:5px;}
		.main{ height:500px;width: 100%; clear: both;}
		.userlist{
			width: 30%;
			height:100%;
			float: left;
			background: rgba(20,20,20,0.5);
			padding:10px;
		}
		.chat{
			width:66%;
			height:100%;
			float:right;
			background: rgba(25,25,25,0.5);
			padding:10px;
		}
		.lititle{color:#fff;background: dodgerblue;}
		.chatinfo{height:350px;overflow: auto;}
		.chatbox{height:100px;background: #F5F5F5;padding:10px;}
		.chatbox textarea{ width:99%; height:60px;resize: none;}
		.chatbox button{ width:100px; margin-left: 540px;}
		.msgleft{margin-bottom:10px;float:left;clear:both;}
		.msgright{margin-bottom:10px;float:right;clear:both;}
		.msg_text{color:#000;background: #fff;padding:2px;}
		.msg_time{color:#fff;background: #000;padding:2px;}
		.msg_who{color:#fff;background:orange;padding:2px;}
		</style>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<div class="container">
			<header>
				<div class="logo">websocket 聊天室</div>
				<div class="userinfo">
				    <span class="loginname">张无忌</span>
				    <a href="#" class="btn">退出</a>
				</div>
			</header>
			<div class="main">
				<div class="userlist">
					<ul id="userul">
						<li class="lititle" onclick='updateUserlist()'>在线用户【3】人</li>
						<li class="userli">TEMO</li>
						<li class="userli">弘历</li>
						<li class="userli">朱元璋</li>
					</ul>
				</div>
				<div class="chat">
					<div class="chatinfo">
						<div class="msgleft">
							<span class="msg_time">2020-02-04 14:56:00</span>
							<span class="msg_who">张无忌:</span>
							<span class="msg_text">约吗？</span>
						</div>
						<div class="msgleft">
							<span class="msg_time">2020-02-04 14:56:00</span>
							<span class="msg_who">系统消息:</span>
							<span class="msg_text">欢迎TEMO 上线</span>
						</div>
						<div class="msgleft">
							<span class="msg_time">2020-02-04 14:56:00</span>
							<span class="msg_who">周芷若:</span>
							<span class="msg_text">哥哥，不约</span>
						</div>
						<div class="msgright">
							<span class="msg_time">2020-02-04 14:56:00</span>
							<span class="msg_who">我:</span>
							<span class="msg_text">文明直播间，请大家注意</span>
						</div>
					</div>
					<div class="chatbox">
						<textarea></textarea>
						<br>
						<button>发送</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
	var uid="1";  //自己的ID
	
	//增加新消息
	function addMess(mess){
		var obj ="<div class='$1'><span class='msg_time'>$2</span> <span class='msg_who'>$3</span> <span class='msg_text'>$4</span></div>";
		if(mess.uid == uid ){
			obj = obj.replace("$1","msgright");
			obj = obj.replace("$3","我");
		}else{
			obj = obj.replace("$1","msgleft");
			obj = obj.replace("$3", mess.from);
		}
		obj = obj.replace("$2",mess.date);
		obj = obj.replace("$4",mess.text);
		$(".chatinfo").prepend(obj);
	}
	
	//更新用户列表
	function updateUserlist(){		
		var obj={"userlist":[{"uid":1,"uName":"德玛"},
							 {"uid":2,"uName":"剑圣"},
							 {"uid":3,"uName":"人马"},
							 {"uid":4,"uName":"螳螂"}
							]};
		$(".userli").remove();
		for( var i  in obj.userlist){
			var t= obj.userlist[i];
			$("#userul").append("<li class='userli' uid='"+t.uid+"'>"+t.uName+"</li>");
		}
		//人数
		$(".lititle").text("在线用户【"+obj.userlist.length+"】人");
		
	}
	
	//每分钟删除消息一次,避免太多
	function delMess(){
		var len = $(".chatinfo").children().length;
		console.log("长度=" + len);
		if(len > 10){  // 消息大于10条 就删除
			console.log("删除前长度=" + sz.length);
			for(var k=len-1;k>10;k--){
				$(".chatinfo").children().last().remove();
			}
			console.log("删除后长度=" + $(".chatinfo").children().length);
		}
		 
	}
		
	$(function(){
		var haha =0;
		var obj ={"uid":1,"date":"2020-02-04 14:56:00","from":"TEMO","text":"今天峡谷见"};
		setInterval(function(){
			if(Math.random()*10 < 5 ){
				obj.uid=1;
			}else{
				obj.uid=2;
			}
			obj.date = new Date();
			obj.text = "测试数据" + haha++;
			addMess(obj);
		},2000);
		
		$(".chatinfo").click(function(){
			delMess();
		});
		
		
	});
		
	</script>
</html>
